<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="title">考试信息</div>
			<div class="info">
				<div class="infot">说明</div>
				<div class="infob">1 <span style="color:#134B9F;">蓝色</span> 边框表示已操作；2 <span style="color:#00CE00;">绿色</span> 边框表示待操作；3 <span style="color:#A6A6A6;">灰色</span> 边框表示目前不能操作； 4 <span style="color:#FF0000;">红色</span> 边框表示审核未通过；</div>
			</div>
			<div class="steps">
				<el-steps direction="vertical" :active="zstep">
					<el-step>
						<template slot="description" >
							<div class="stepdiv">
								<span class="stepspan">信息维护<span class="step2span">(请及时填写报名信息)</span></span>
								<el-button v-if="result==0" type="primary" class="infobtn" @click="towrite">立即填写</el-button>
								<el-button v-else-if="result==1 || result==4" type="primary" class="infobtn" @click="towrite2">修改信息</el-button>
							</div>
						</template>
					</el-step>
					<el-step>
						<template slot="description" >
							<div class="stepdiv">
								<span class="stepspan">提交审核<span class="step2span">(请及时确认报名信息)</span></span>
								<el-button v-if="result==1 || result==4" type="primary" class="infobtn" @click="toaudit">提交审核</el-button>
							</div>
						</template>
					</el-step>
					<el-step :class="{is_success:result==3,is_fail:result==4,is_over:result==5,is_audit:result==2}">
						<template slot="description" >
							<div :class="{stepdiv:true}" >
								<span class="stepspan">信息审核<span class="step2span" v-if="reviewRemarks">({{reviewRemarks}})</span></span>
								<el-button v-if="result==2" type="primary" class="infobtn" @click="tocancel">撤销</el-button>
							</div>
						</template>
					</el-step>
				</el-steps>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id:this.$route.query.id,
				zstep:0,
				result:null,
				reviewRemarks:null
				// zstep:2,
				// result:2
			};
		},
		computed: {},
		mounted() {
			this.getcurrstatus()
		},

		methods: {
			async getcurrstatus() {
				try{
					var res = await this.$api.Join.Getcurrstatus({ examId:this.id })
					// 0未报考 1已填写保存（可以修改）.2已提交审核（不可以修改）3.审核成功4.审核失败5.已完结
					// res.data.reviewStatus=4
					this.result=res.data.reviewStatus
					
					if(res.data.reviewStatus==0){
						this.zstep=0
					}else if(res.data.reviewStatus==1){
						this.zstep=1
					}else{
						this.zstep=2
						if(this.result==2){
							this.reviewRemarks='正在审核中，请等待'
						}else if(this.result==3){
							this.reviewRemarks='考生信息已审核通过'
						}else if(this.result==4){
							this.reviewRemarks=res.data.reviewRemarks
						}else if(this.result==5){
							this.reviewRemarks='审核已完结'
						}
					}
				}catch(e){
					
				}
				
			},
			towrite() {
				this.$router.push({ name: 'Write', query: { id:this.id } })
			},
			towrite2() {
				this.$router.push({ name: 'Write', query: { id:this.id } })
			},
			toaudit(){
				this.$router.push({ name: 'Audit', query: { id:this.id } })
			},
			async tocancel(){
				var res=await this.$api.Join.Cancelaudit({examId:this.id})
				if(res.type=='success'){
					this.getcurrstatus()
				}
			}
		},
	};
</script>

<style lang="less" scoped>

	/deep/ .is-finish .el-step__icon.is-text{
		background-color: #134B9F !important;
		color:#fff !important;
		border:none !important;
	}
	/deep/ .is-process .el-step__icon.is-text{
		background-color: #00CE00 !important;
		color:#fff !important;
		border:none !important;
	}
	/deep/ .is-wait .el-step__icon.is-text{
		background-color: #bbb !important;
		color:#fff !important;
		border:none !important;
	}
	/deep/ .is_audit .el-step__icon.is-text{
		background-color: #bbb !important;
		color:#fff !important;
		border:none !important;
	}
	/deep/ .is_over .el-step__icon.is-text{
		background-color: #bbb !important;
		color:#fff !important;
		border:none !important;
	}
	/deep/ .is_fail .el-step__icon.is-text{
		background-color: #f00 !important;
		color:#fff !important;
		border:none !important;
	}
	.rightcontainer {
		width: 920px;
		margin: 0 auto 40px;
		overflow: hidden;

		.rightmain {
			width: 100%;
			margin: 20px 0;

			.title {
				color: #134B9F;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				padding-bottom: 9px;
				border-bottom: 2px solid #134B9F;
				display: inline-block;
				letter-spacing: 2px;
			}

			.info {
				color: #383838;
				font-size: 16px;
				padding: 8px 12px;
				border: 1px dashed #888;
				margin: 12px 0;
				background-color: #eee;

				.infot {
					line-height: 24px;
					font-weight: bold;
				}

				.infob {
					line-height: 28px;
					margin-top: 6px;
				}
			}
			.steps{
				margin-top: 60px;
				height:290px;
				.stepdiv{
					width:878px;
					margin-left:8px;
					height:77px;
					border:2px solid #bbb;
					margin-top:-32px;
					display:flex;
					align-items:center;
					color:#383838;
					font-size:20px;
					padding:0 40px 0 20px;
					.stepspan{
						flex:1;
						.step2span{
							color:#f00;
							font-weight:400;
							font-size:18px;
							margin-left:8px;
							display: none;
						}
					}
					.infobtn{
						border:none;
					}
				}
				.is-finish{
					.stepdiv{
						border:2px solid #134B9F;
						.infobtn{
							background-color:#134B9F;
						}
					}
					
				}
				.is-process{
					.stepdiv{
						border:2px solid #00CE00;
						.infobtn{
							background-color:#00CE00;
						}
						.stepspan{
							font-weight:600;
							.step2span{
								display: inline;
							}
						}
					}
					
				}
				.is-wait{
					.stepdiv{
						border:2px solid #bbb;
						.infobtn{
							background-color:#bbb;
						}
					}
					
				}
				.is_audit{
					.stepdiv{
						border:2px solid #bbb !important;
						.infobtn{
							background-color:#134B9F;
						}
					}
				}
				.is_success{
					
				}
				.is_fail{
					.stepdiv{
						border:2px solid #f00 !important;
						.stepspan{
							font-weight:600;
							.step2span{
								display: inline;
							}
						}
					}
				}
				.is_over{
					.stepdiv{
						border:2px solid #bbb !important;
						
					}
				}
			}
		}
	}
</style>
